<template>
    <div class="goods-list">
         
       <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-if="flag" ref="ball"></div>
       </transition>
        <!-- 商品轮播区域 -->
            <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swipe :lunbotu='lunbotu'></swipe>
					</div>
				</div>
			</div>
        <!-- 商品购买区域 -->
            <div class="mui-card">
				<div class="mui-card-header">{{goodInfo.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
                            市场价：<del>￥{{goodInfo.market_price}}</del>&nbsp;&nbsp;销售价：<span class="now_price">￥{{goodInfo.sell_price}}</span>
                        </p>
                        <p class="goodss">购买数量：<goodNumber @goodnums="goodsns" :max='goodInfo.stock_quantity'></goodNumber></p>
                        <p>
                            <mt-button type='primary' size='small' >立即购买</mt-button>
                            <mt-button type='danger' size='small' @click="addtoshopcar">加入购物车</mt-button>
                        </p>
					</div>
				</div>
				
			</div>

        <!-- 商品参数区域 -->
            <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{goodInfo.goods_no}}</p>
                        <p>库存情况：{{goodInfo.stock_quantity}}件</p>
                        <p>上架时间：{{goodInfo.add_time|dtaFormat}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
                    <mt-button type='primary' size='large' plain @click="goDesc(id)">图文介绍</mt-button>                   
                    <mt-button type='danger' size='large' plain @click="goComment(id)">商品评论</mt-button>
                </div>
			</div>
    </div>
</template>
<script>
    import axios from 'axios'
    import {Toast} from 'mint-ui'
    import swipe from '../subcomponents/swiper.vue'
    import goodNumber from '../subcomponents/goodsinfo_number.vue'
    export default {
        data(){
            return {
                lunbotu:[],
                id:this.$route.params.id,
                goodInfo:{},
                flag:false,
                selectedcoung:1
            }
        },
        created() {
            this.goodsdetailsinfo()
            this.goodsinfo()
        },
        methods:{
            goodsdetailsinfo(){
                axios({
                    method:'get',
                    url:`http://www.liulongbin.top:3005/api/getthumimages/${this.id}`
                }).then(res=>{
                    if(res.data.status===0){
                        // 先循环轮播图数据的每一项，为item添加img属性，因为轮播图组件中，只认识item.img不认识item.src
                        res.data.message.forEach(item => {
                            item.img_url=item.src
                        })
                        // console.log(res.data.message)
                        this.lunbotu=res.data.message;
                    }else{
                        Toast("获取数据失败")
                    }
                })
            },
            goodsinfo(){
                axios({
                    method:'get',
                    url:`http://www.liulongbin.top:3005/api/goods/getinfo/${this.id}`
                }).then(res=>{
                    if(res.data.status===0){
                        console.log(res.data)
                        this.goodInfo=res.data.message[0]
                        // console.log(res.data.message)
                    }else{
                        Toast("获取数据失败")
                    }
                })
            },
            goDesc(id){
                this.$router.push({name:'/home/goodsdesc',params:{id}})
            },
            goComment(id){
                this.$router.push({name:'/home/goodscomment',params:{id}})
            },
            beforeEnter(el){
                            el.style.transform="translate(0,0)"
                        },
            enter(el,dome){
                el.offsetWidth
                // 小球动画优化思路
                // 1，分析导致动画不准确的本质原因，我们把小球最终位移到位置，已经局限子了某一
                // 分辨率下的滚动条未滚动的情况下
                // 只要分辨率和测试的时候不一样，或者滚动条有一定的滚动距离后，问题就出现了
                // 因此我们经过分析 得到结论，不能把位置直接写死了，而是应该根据不同情况，动态计算坐标值
                // 经过分析，得出解题思路，先得到徽标的位置，在得到小球的位置，然后让y值求差，x值也求差
                // 得到的结果，就是位置位移的距离
                // 如何获取徽标和小球的位置，domObject.getBoundingClientRect()
                // 获取小球的在页面中的位置
                const ballposition=this.$refs.ball.getBoundingClientRect()
                // 获取徽标在页面上的位置
                const bageposition=document.getElementById("badge").getBoundingClientRect()
                const xDist=bageposition.left-ballposition.left
                const yDist=bageposition.top-ballposition.top
                el.style.transform=`translate(${xDist}px,${yDist}px)`
                el.style.transition="all 0.5s cubic-bezier(.4,-0.3,1,.68)"
                dome()
            },
            afterEnter(){
                // 下面这句话第一个功能，是控制小球的显示与隐藏，第二个功能，直接跳过后半场动画，
                // 让flag标识符直接变为flase
                // 动画的钩子函数有两个过程一个是前半场一个后半场。
                this.flag=!this.flag
            },
            goodsns(num){
                this.selectedcoung=num
                console.log(this.selectedcoung)
            },
            addtoshopcar(){
                // 添加购物车
                this.flag=!this.flag
                //拼接出一个 要保存到store中car数组里的商品信息对象
                let goodsinfo={id:this.id,count:this.selectedcoung,price:this.goodInfo.sell_price,selected:true}
                //调用store中的mutatios来讲商品加入购物车
                console.log(goodsinfo)
                this.$store.commit('addtocar',goodsinfo)
            }
        },
        components:{
            swipe,
            goodNumber
        }
    }
</script>
<style lang="scss">
    // p{
    //     .gomeImgLoad{
    //         width: 100%;
    //     }
    //     }
    .goods-list{
        background-color: #eee;
        overflow: hidden;
        .now_price{
            color: red;
            font-size: 16px;
            font-weight: bold;
        };
        .goodss{
            div{
                display: inline-block
            }
        };
        .mui-card-footer{
            display: block;
            button{
                margin: 15px 0;
            }
        };
         .ball{
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: red;
            position: absolute;
            z-index: 99;
            top: 390px;
            left: 147px;
        }
    }   
</style>
